revision:
used to draw circles based on a center point and a radius. Attributes: cx, cy, r, pathlength
starting with SVG2, cx, cy, and r are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<svg viewBox="0 0 100 50">
<circle cx="40" cy="20" r="20"/>
</svg>
Used to create ellipses based on a center coordinate, and both their x and y radius. Attributes: cx, cy, rx, ry, pathlength
starting with SVG2, cx, cy, rx and ry are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<svg height="180" width="500">
<ellipse cx="200" cy="80" rx="150" ry="70" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
Used to create a line connecting two points. Attributes: x1, x2, y1, y2, pathlength
codes:
<svg viewBox="0 0 100 60">
<line x1="0" y1="60" x2="90" y2="10" stroke="blue"/>
</svg>
Defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point. Attributes: points, pathlength
codes:
<svg viewBox="0 0 200 100">
<!-- Example of a polygon with the default fill -->
<polygon points="0,100 50,25 50,75 100,0" />
<!-- Example of the same polygon shape with stroke and no fill -->
<polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
Creates straight lines connecting several points. Typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point.Attributes: points, pathlength
codes:
<svg viewBox="0 0 200 100">
<!-- Example of a polyline with the default fill -->
<polyline points="0,100 50,25 50,75 100,0" />
<!-- Example of the same polyline shape with stroke and no fill -->
<polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="darkgreen" />
</svg>
Draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded. Attributes: x, y, width, height, rx, ry, pathlength
starting with SVG2, x, y, width, height, rx and ry are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<svg viewBox="0 0 220 100">
<!-- Simple rectangle -->
<rect width="100" height="100"/>
<!-- Rounded corner rectangle -->
<rect x="120" width="100" height="100" rx="15" />
</svg>